<template>
  <div>
    <el-dialog
      title="商品明细"
      :visible.sync="dialogDisP"
      width="960px"
      top="50vh"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      custom-class="samples-dialog material-datail"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <el-row class="samples-dialog-box" style="max-height: 600px;overflow: auto;padding-top: 0px;">
        <selectTable :data-objects="dataObjects" :obj-query="objQuery" @sonTableQuery="getDetailList" />
        <!-- @childSay="listenToMyBoy" -->
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import selectTable from './selectTable'
import * as contractCorrelationApi from '@/api/contractManage/contractCorrelation'
import {
  materialDetailApi
} from '@/api/contractManage/contractAnalysis'

export default {
  components: {
    selectTable
  },
  props: {
    materialId: {
      type: Number,
      required: true
    },
    detailId: {
      type: String,
      default: '1'
    },
    dialogDisP: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
    // 子组件返回出来选择中的值
      multipleSelection: [],
      dataObjects: {

      },
      ismore: false,
      objQuery: {
        page: 1,
        pageSize: 10,
        id: ''
      }

    }
  },
  watch: {
    // dialogDisP: {
    //   handler: function(val, oldval) {
    //     if (val) {
    //       this.getList()
    //     }
    //   },
    //   immediate: true, // 关键
    //   deep: true
    // },
    materialId: {
      handler: function(val, oldval) {
        this.getDetailList()
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('child-say', false)
    },
    getDetailList(obj) {
      if (obj) {
        this.objQuery = {
          page: obj.page,
          pageSize: obj.pageSize,
          id: this.materialId
        }
      } else{
        this.objQuery = {
          page: 1,
          pageSize: 10,
          id: this.materialId
        }
      }
      materialDetailApi(this.objQuery).then(res => {
        if (res.code === 1) {
          this.dataObjects = res.data
        } else{
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" >
    .material-datail {
      .el-dialog__body{
          padding-bottom: 25px !important;
      }

    }
</style>
